<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!--此页面实现Word图片自动批量上传的功能-->
    <title>WordPaster For CKEditor-4.x</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />
    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="WordPaster/js/w.js" charset="utf-8"></script>
	<script type="text/javascript" src="zyCapture/z.js" charset="utf-8"></script>
	<script type="text/javascript" src="zyOffice/js/o.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="demo.js" charset="utf-8"></script>
</head>
<body>
	<div id="demos"></div>	
    <div id="ck">
        <ckeditor ref="ck">
            <p>泽优全平台内容发布解决方案 for jsp ckeditor4</p>
            <p>泽优Word一键粘贴控件（WordPaster）</p>
            <p>泽优全平台截屏控件（zyCapture）</p>
            <p>泽优Office文档转换服务（zyOffice）</p></ckeditor><br/>
        <ckeditor></ckeditor>
    </div>
    <script>
        Vue.component('ckeditor', {
            data: function(){
                return {
                    editor: null, eid:"editor"+(new Date().getTime())
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted: function(){
            	var pos = window.location.href.lastIndexOf("/");
		        var api = [
		            window.location.href.substr(0, pos + 1),
		            "upload.jsp"
		        ].join("");
            	WordPaster.getInstance({
            		//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
        	        PostUrl:api,
					//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
					ImageUrl: "",
					//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
					FileFieldName: "file",
					//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
					ImageMatch: '',
					event:{
						dataReady:function(e){
							//e.word,
							//e.imgs:tag1,tag2,tag3
							console.log(e.imgs)
						}
					}					
        	    });//加载控件
		
                //zyCapture
                zyCapture.getInstance({
                    config: {
                        PostUrl: api,
                        FileFieldName: "file",
                        Fields: { uname: "test" }
                    }
                });

                //zyoffice，
                //使用前请在服务端部署zyoffice，
                //http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
                zyOffice.getInstance({
                    word:"http://localhost:13710/zyoffice/word/convert",
                    wordExport:"http://localhost:13710/zyoffice/word/export",
                    pdf:"http://localhost:13710/zyoffice/pdf/upload"
                });

                CKEDITOR.config.extraPlugins = 'zycapture,imagepaster,importwordtoimg,netpaster,wordimport,excelimport,pptimport,pdfimport,importword,exportword,importpdf';
                //自定义快捷键
                CKEDITOR.config.keystrokes = [
                    [CKEDITOR.CTRL + 86/*V*/, 'imagepaster']
                ];

                CKEDITOR.on('currentInstance', function()
                {
                    if(CKEDITOR.currentInstance)
                    {
                        WordPaster.getInstance().SetEditor(CKEDITOR.currentInstance);
                    }
                });
        
                //加载CKEditor编辑器
                this.editor = CKEDITOR.replace(this.eid,
				{
					//https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
					allowedContent:true//不过滤样式
				});
            },
            methods: {
                getCKData: function(){
                    return this.editor.getData()
                }
            },
            destroyed: function(){
                this.editor.destroy()
            },
            template: '<div><textarea :id="eid" name="editor"/></div>'
        });

        var ck = new Vue({
            el: '#ck',
            data: {
            }
            , mounted: function () {
            }
        });
    </script>
</body>
</html>